<template>
  <div style="padding: 10px 0px; background-color: white">
    <van-form @submit="submitForm">
      <searchable-picker
        v-model="form.taskType"
        :columns="dict.type.task_type"
        valueKey="value"
        labelKey="label"
        label="工单类型"
        placeholder="点击工单类型"
        :rules="[{ required: true, message: '请选择工单类型' }]"
      />
      <searchable-picker
        v-model="form.customerId"
        :columns="customerList"
        valueKey="customerId"
        labelKey="customerName"
        label="客户名称"
        placeholder="点击选择客户名称"
        :rules="[{ required: true, message: '请选择客户名称' }]"
      />
      <searchable-picker
        v-model="form.orderId"
        :columns="orderListAll"
        valueKey="orderId"
        labelKey="orderName"
        label="商机名称"
        placeholder="点击选择商机名称"
        :rules="[{ required: true, message: '请选择商机名称' }]"
      />
      <van-field
        readonly
        clickable
        name="area"
        :value="form.region"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
        :rules="[{ required: true, message: '请选择地区' }]"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>

      <van-field
        v-model="form.startTime"
        label="开始日期"
        placeholder="请选择开始日期"
        @click="startTimeFlag = true"
        :rules="[{ required: true, message: '开始日期不能为空' }]"
      />
      <van-calendar
        v-model="startTimeFlag"
        @confirm="onConfirmDate($event, 'startTimeFlag', 'startTime')"
      />
      <van-field
        v-model="form.endTime"
        label="结束日期"
        placeholder="请选择结束日期"
        @click="endTimeFlag = true"
        :rules="[{ required: true, message: '结束日期不能为空' }]"
      />
      <van-calendar
        v-model="endTimeFlag"
        @confirm="onConfirmDate($event, 'endTimeFlag', 'endTime')"
      />

      <searchable-picker
        v-model="form.taskLevel"
        :columns="dict.type.task_level"
        valueKey="value"
        labelKey="label"
        label="紧急程度"
        placeholder="点击紧急程度"
        :rules="[{ required: true, message: '请选择紧急程度' }]"
      />
      <searchable-picker
        v-model="form.taskMode"
        :columns="dict.type.task_mode"
        valueKey="value"
        labelKey="label"
        label="实施类型"
        placeholder="点击实施类型"
        :rules="[{ required: true, message: '请选择实施类型' }]"
      />
      <searchable-picker
        v-model="form.userId"
        :columns="userList"
        valueKey="userId"
        labelKey="userName"
        label="负责人"
        placeholder="点击负责人"
        :rules="[{ required: true, message: '请选择负责人' }]"
      />
      <van-field
        v-model="form.receivablePayable"
        type="number"
        label="应收金额"
        placeholder="请输入应收金额"
      />
      <van-field
        v-model="form.receivablePaid"
        type="number"
        label="已收金额"
        placeholder="请输入已收金额"
      />
      <van-field
        v-model="form.taskPrice"
        rows="3"
        autosize
        label="实施价格"
        type="textarea"
        placeholder="请输实施价格"
      />
      <van-field
        style="margin-bottom: 50px"
        v-model="form.remark"
        rows="3"
        autosize
        label="工作日志"
        type="textarea"
        placeholder="请输入工作日志"
        :rules="[{ required: true, message: '请输入工作日志' }]"
      />
      <van-field
        style="margin-bottom: 50px"
        v-model="form.illustrate"
        rows="3"
        autosize
        label="工单说明"
        type="textarea"
        placeholder="请输入工单说明"
      />
      <div class="mobile-footer">
        <van-button
          v-if="form.status == '0'"
          round
          type="info"
          native-type="submit"
          style="width: 90%"
          >{{ title }}</van-button
        >
      </div>
    </van-form>
  </div>
</template>
  
  <script>
import { addTask, updateTask, getTask } from "@/api/crm/task";
import { getCrmCustomerAllNoPage } from "@/api/crm/customer";
import { getCrmOrderAllNoPage } from "@/api/crm/order";
import { getUserListByStatus } from "@/api/system/user";
import { areaList } from "@vant/area-data";
export default {
  name: "taskAdd",
  dicts: ["task_type", "task_level", "task_mode", "task_status"],
  data() {
    return {
      customerList: [],
      userList: [],
      orderListAll: [],
      areaList: {},
      startTimeFlag: false,
      endTimeFlag: false,
      // 表单参数
      form: {},
      yearColumns: [],
      showArea: false,
      dictList: [],
      title: "新增",
      taskTypeColumns: [
        { type: "钉钉工单" },
        { type: "基础工单" },
        { type: "售前工单" },
        { type: "项目工单" },
        { type: "维保工单" },
        { type: "外包型工单" },
        { type: "他工单（后补）" },
        { type: "运维工单" },
        { type: "研发工单" },
        { type: "加班工单" },
      ],
    };
  },
  created() {
    this.handleUpdate();
    this.areaList = areaList;
    this.getCrmCustomerAllNoPage();
    this.getUserListByStatus();
    getCrmOrderAllNoPage({}).then((res) => {
      this.orderListAll = res.data;
    });
  },
  methods: {
    getUserListByStatus() {
      getUserListByStatus({ status: "0" }).then((res) => {
        this.userList = res.data;
      });
    },
    onConfirmDate(date, flag, fildes) {
      this[flag] = false;
      this.form[fildes] = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}`;
    },
    getCrmCustomerAllNoPage() {
      getCrmCustomerAllNoPage({}).then((res) => {
        this.customerList = res.data;
      });
    },
    onConfirm(values) {
      this.form.region = "";
      this.form.region = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(",");
      this.showArea = false;
    },
    reset() {
      this.form = {
        id: null,
        customerId: null,
        orderId: null,
        taskType: null,
        phone: null,
        address: null,
        startTime: null,
        endTime: null,
        actualDay: null,
        taskLevel: null,
        coPerson: null,
        receivablePayable: null,
        receivablePaid: null,
        taskPrice: null,
        files: null,
        remark: null,
        status: null,
        region: null,
        illustrate: null,
        signature: null,
        nodeName: null,
        nodeCode: null,
        instanceId: null,
        auditStatus: null,
        flowStatus: null,
        userId: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        taskMode: null,
        maintenanceId: null,
      };
    },
    handleUpdate() {
      this.reset();

      if (this.$route.params.id === "-1") {
        this.form.status = "0";
      } else {
        this.form.id = this.$route.params.id;
        getTask(this.form.id).then((response) => {
          this.form = response.data;
          this.title = "修改";
        });
      }
    },
    // handleUpdate() {
    //   this.reset();
    //   this.form.id = this.$route.params.id;
    //   getTask(this.form.id).then((response) => {
    //     this.form = response.data;
    //     this.title = "修改";
    //   });
    // },

    /** 提交按钮 */
    submitForm() {
      if (this.form.id !== "-1") {
        updateTask(this.form).then((response) => {
          this.$toast.success("修改成功");
          this.$router.replace("/crm/task");
        });
      } else {
        addTask(this.form).then((response) => {
          this.$toast.success("新增成功");
          this.$router.replace("/crm/task");
        });
      }
    },
  },
};
</script>
  
  <style scoped>
.submitButton {
  width: 95%;
  height: 50px;
  position: fixed;
  top: 90%;
  left: 10px;
}
</style>